<template>
  <view class="container">
    <view  :style="{'display':display1}">
      <homeForExamine></homeForExamine>
    </view>
    <view  :style="{'display':display2}">
      <view class="fixed-top  padding-lr12"
            :style="{ 'padding-top': top + 'px','background-color': style['home_nav_background_color'] }">
        <view class="flex f-a-c h-44">

          <view :style="{'color': 'black'}"
                class="flex f-a-c f-j-c van-icon van-icon-scan  f22-size margin-r10" @click="toScan"></view>
          <view class="flex flex-1 f-a-c  h-34 padding-lr12 margin-r10">
            <u-notice-bar mode="horizontal" :list="rollingNotifyList" border-radius="25"
                          style="width: 180px"></u-notice-bar>
            <view class="flex f-s-0 w-30 h-30 b-radius margin-l6 bg-img"
                  :style="'background-image:url('+headImg+')'" @click="bigHeadImg"></view>
          </view>


          <xcx-header></xcx-header>
        </view>

        <view style="padding: 2px;"></view>
      </view>

      <!-- 轮播图 -->
      <view :style="{ 'margin-top': marginTop }" style="margin: 5px">
        <view class="swiper-view">
          <swiper class="swiper" style="height: 228px" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff">
            <swiper-item v-for="swiper in swiperList" :key="swiper.sid" @tap="toSwiper(swiper)">
              <image  :src="swiper.img+'?'+globalImageProcessingSuffix" height="228px"></image>
            </swiper-item>
          </swiper>
          <!--        <view class="keep-out" :style="{'background-color': style['home_category_background_color'] }"></view>-->
        </view>
        <!-- 分类轮播 -->
        <view class="category" :style="{'background-color': style['home_category_background_color'] }"
              style="margin-top: 8px;border-radius: 5px;">
          <view class="box" :style="{'background-color': style['home_category_background_color'] }">
            <swiper class="swiper" duration="300" :style="{ height: categoryHeight }" @change="categoryChange">
              <swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex">
                <view class="category-list">
                  <view class="icon" v-for="category in page" :key="category.cat_id" @tap="toCategory(category)">
                    <image mode="widthFix" :src="category.img+'?'+globalImageProcessingSuffix" @load="categoryImgLoad"
                           style="height: 100px;border-radius: 50%;box-shadow: 0 0 7px rgba(0, 0, 0, 0.12);"></image>
                    <view style="margin-top: 15px">{{
                        isAuth && (category.cat_id === 2) ? "我的商家" : category.title
                      }}
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
            <view class="dots">
              <view v-for="(page, pageindex) in categoryList" :key="pageindex"
                    :class="{ active: pageindex == currentPageindex }"></view>
            </view>
          </view>
        </view>

        <!-- 广告横幅 -->
        <view class="banner" style="margin-top: 8px">
          <image mode="widthFix" :src="advertisingBanners+'?'+globalImageProcessingSuffix" @click="goToOtherPageFromBanner"
                 style="border-radius: 5px;"></image>
        </view>
        <!-- 商品列表 -->
        <view class="goods-list" :style="{'background-color': style['home_goodsList_background_color'] }"
              style="margin-top: 8px;border-radius: 5px;">
          <!--        <view class="title">— 猜你喜欢 —</view>-->
          <u-tabs :list="listTabs" :is-scroll="false" :current="current" @change="change"
                  :bg-color="style.home_tabs_background_color" :height="120"></u-tabs>
          <view style="margin-top: 7px">
            <view class="product-list" v-if="current===0">
              <view class="product" v-for="(video,index) in listTrends" :key="index">
                <view class="container" style="position: relative;" @tap="toGoods(video)">
                  <image :src="video.mainImg" style="height: 300px"></image>
                  <!-- 播放箭头 -->
                  <view v-if="video.type===1"
                        class="play-role flex f-a-c f-j-c w-20 h-20 b-radius t-color-w van-icon van-icon-play f13-size"
                        style="font-size: 27px;color: grey"></view>
                </view>

                <view class="info">
                  <text v-if="video.type == 1"
                        class="b-radius-2 h-16 padding-lr4 f11-size t-color-w bg-color-linear-r margin-r4">
                    {{ '短视频' }}
                  </text>
                  <text v-if="video.type == 3"
                        class="b-radius-2 h-16 padding-lr4 f11-size t-color-w bg-color-linear-r margin-r4">
                    {{ '图片' }}
                  </text>
                  <text @click="showContent(video)"
                        class="b-radius-2 h-16 padding-lr4 f11-size t-color-w bg-color-linear-bg">
                    {{ '文案' }}
                  </text>
                </view>
              </view>
            </view>
            <view v-if="current===1">
              <kristen-goods-list :goodsList="dataNiceGoodsList" :mpGoodsShow="'imgUpTxtDown'" @clickGood="clickGood"></kristen-goods-list>
              <no-data :list="dataNiceGoodsList"></no-data>
            </view>
            <view  v-if="current===2">
              <u-tabs :list="listTabsCates" :current="currentCates" @change="changeCates"
                      :bg-color="style.home_tabs_background_color"
                      style="overflow: scroll"></u-tabs>
              <kristen-goods-list :goodsList="listNiceGoodsCat" :mpGoodsShow="'imgUpTxtDown'" @clickGood="clickGood"></kristen-goods-list>
              <no-data :list="listNiceGoodsCat"></no-data>
            </view>
            <view class="loading-text">{{ loadingText }}</view>
            <view class="loading-text">{{ loadingText2 }}</view>

          </view>
          <view style="height: 50px"></view>
        </view>
      </view>
      <view style="height: 50px" v-if="!isAuth||!isLogin"></view>

      <tab-bar ref="tabbar" :showLogin="true" :active="0" :isShow="false" :isAuth="isAuth" :isLogin="isLogin"></tab-bar>

      <toUserAuth ref="toUserAuth"
                  :invitMsg="invitMsg"
                  :isDisabled="isDisabled"
                  :invitationCode="invitationCode"
                  :currentDoAuth="currentDoAuth"
                  @indexGgRefresh="indexGgRefresh"></toUserAuth>
    </view>
  </view>
</template>
<script>
import toUserAuth from "../user/components/toUserAuth.vue";
import homeForExamine from "../index/homeForExamine.vue";
import findList from "@/pages/find/components/findlist.vue";
import KristenGoodsList from "@/uni_modules/goods-list/kristen-goodsList.vue";
const APIGoods = require('../../utils/api/goods.js').default;
const API = require('../../utils/api/find.js').default;
const APIHome = require('../../utils/api/home.js').default;
const $ = require('../../utils/api.js');

export default {
  components: {findList, toUserAuth, homeForExamine,KristenGoodsList},
  data() {
    return {
      tag:2,
      display1:"none",
      display2:"block",
      globalImageProcessingSuffix:'',
      style: "",
      listTabsCates: [],
      currentCates: 0,
      listNiceGoodsCat: [],
      imageSrcKey: "mainImg",
      offset: 1.2,
      cols: 2,
      dataNiceGoodsList: [],
      listTabs: [{
        name: '热门素材'
      }, {
        name: '好物分享'
      }, {
        name: '探店实体'
      }, {
        name: 'MORE'
      }],
      current: 0,
      isShowHomeForExamine: true,
      bannerToUrl: "",
      advertisingBanners: "",
      isShowWatermark: uni.getStorageSync('config').is_open_watermark_img == '1' ? true : false,
      watermarkContent: uni.getStorageSync('config').watermark_content_img,
      headImg: "",
      listTrends: [],
      page: 1,
      pageSize: 4,
      totalPage: 1,
      pageNum: 1,

      pageNiceGoods: 1,
      pageSizeNiceGoods: 4,
      totalPageNiceGoods: 1,
      pageNumNiceGoods: 1,

      pageNiceGoodsCates: 1,
      pageSizeNiceGoodsCates: 4,
      totalPageNiceGoodsCates: 1,
      pageNumNiceGoodsCates: 1,

      rollingNotifyList: [],
      invitMsg: "商家邀请码：",
      isDisabled: false,
      invitationCode: "",
      currentDoAuth: 'add',
      marginTop: 0,
      top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
      isLogin: uni.getStorageSync('token') ? true : false,
      isAuth: uni.getStorageSync('userInfo').shopStatus == 1 ? true : false,
      //轮播
      swiperList: [],
      //分类
      categoryList: [
        [//第一页
          {cat_id: 0, img: 'https://img.fscmkjznb.com/static/category-img/0.png', title: '原创素材'},
          {cat_id: 1, img: 'https://img.fscmkjznb.com/static/category-img/1.png', title: '好物分享'},
          {cat_id: 2, img: 'https://img.fscmkjznb.com/static/category-img/2.png', title: '绑定商家'},
          {cat_id: 3, img: 'https://img.fscmkjznb.com/static/category-img/3.png', title: '我的素材'},
        ]
      ],
      categoryHeight: '150px',
      currentPageindex: 0,
      headerPosition: "fixed",
      loadingText: "",
      loadingText2: ""

    };
  },
  onReady() {

  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    if (e.scrollTop >= 0) {
      this.headerPosition = "fixed";
    } else {
      this.headerPosition = "absolute";
    }
  },
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    this.page = 1
    this.listTrends = []
    this.getListTrends()


    this.pageNiceGoods = 1
    this.dataNiceGoodsList = []
    this.listNiceGoodsList()
    this.listHomeFloorConfig()
  },
  //上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
  onReachBottom() {
    if (this.current === 0) {
      if (this.pageNum < this.totalPage) {
        this.page++
        this.getListTrends()
      }
    } else if (this.current === 1) {
      if (this.pageNumNiceGoods < this.totalPageNiceGoods) {
        this.pageNiceGoods++
        this.listNiceGoodsList()
      }
    } else if (this.current === 2) {
      if (this.pageNumNiceGoodsCates < this.totalPageNiceGoodsCates) {
        this.pageNiceGoodsCates++
        let cateId = this.listTabsCates[this.currentCates].catePid
        this.getGoodsList(cateId)
      }
    }

  },
  onShow() {
    this.globalImageProcessingSuffix = getApp().globalData.globalImageProcessingSuffix;
    this.getStyleConfig()
    this.current = 0
    this.getConfig()
    this.showHeadImg()
    this.$nextTick(() => {
      this.$refs.tabbar.reloadHeight();
    })
    this.isLogin = uni.getStorageSync('token') ? true : false;
    this.isAuth = uni.getStorageSync('userInfo').shopStatus == 1 ? true : false;
    let self = this;
    self.$nextTick(() => {
      if (self.$refs.tabbar) {
        self.$refs.tabbar.getChatLen();
      }
    })
  },
  onLoad() {

    let data = uni.getStorageSync('config') ? uni.getStorageSync('config') : '';
    this.loadingText = data.web_name + "版权所有"
    this.loadingText2 = "楼下科技技术支持"
    /*#ifdef H5*/
    this.marginTop = "49px"
    /*#endif*/

    /*#ifdef MP-WEIXIN*/
    this.marginTop = "93px"
    /*#endif*/
    this.getListTrends()
    //加载后台楼层配置
    this.listHomeFloorConfig()
    this.getCatList()


  },
  methods: {
    getConfig() {
      const self = this;
      $.ajax({
        url: 'common/config/getList',
        data: {},
        method: 'GET',
        success(res) {
          let config = res.data
          if ( config.is_show_home_examine==='0'){
            self.isShowHomeForExamine = false
            self.display1 = "none"
            self.display2 = "block"
          }else{
            self.isShowHomeForExamine = true
            self.display1 = "block"
            self.display2 = "none"
          }
        }
      });
    },
    getStyleConfig() {
      this.getStyle().then((res) => {
        this.style = res;
        console.log(this.style)
      })
    },
    getCatList() {
      const self = this;
      self.listTabsCates = [
        {
          catePid: 0,
          name: "推荐"
        }
      ]
      $.ajax({
        url: APIGoods.goodsCate,
        data: {},
        loading: true,
        method: 'GET',
        success(res) {
          res.data.forEach(item => {
            let dataItem = {}
            dataItem.name = item.name
            dataItem.catePid = item.id
            self.listTabsCates.push(dataItem)
          })
        }
      })
    },
    getGoodsList(catePid) {
      const self = this;
      $.ajax({
        url: APIGoods.getNiceGoodsList,
        data: {
          catePid: catePid,
          page: self.pageNiceGoodsCates,
          pageSize: self.pageSizeNiceGoodsCates,
        },
        loading: true,
        method: 'GET',
        success(res) {
          let list = [];
          if (self.pageNiceGoodsCates != 1) {
            list = self.listNiceGoodsCat.concat(res.data.list);
          } else {
            list = res.data.list ? res.data.list : [];
          }
          self.totalPageNiceGoodsCates = res.data.totalPage;
          self.pageNumNiceGoodsCates = res.data.pageNum;
          self.listNiceGoodsCat = list;
        }
      })
    },
    clickGood(data) {
      //这里就不跳到店铺商品详情页面了
      console.log("haha",data)
      $.go('/pagesA/shops/detail?id=' + data.id+"&shopId="+data.shopId);
    },
    //加载好物分享商品列表
    listNiceGoodsList() {
      const self = this;

      $.ajax({
        url: APIGoods.getNiceGoodsList,
        data: {
          catePid: 0,
          page: self.pageNiceGoods,
          pageSize: self.pageSizeNiceGoods,
        },
        loading: true,
        method: 'GET',
        success(res) {
          let list = [];
          if (self.pageNiceGoods != 1) {
            list = self.dataNiceGoodsList.concat(res.data.list);
          } else {
            list = res.data.list ? res.data.list : [];
          }
          self.totalPageNiceGoods = res.data.totalPage;
          self.pageNumNiceGoods = res.data.pageNum;
          self.dataNiceGoodsList = list;


        }
      })
    },


    change(index) {
      this.current = index;
      if (this.current === 0) {
        this.listTrends = []
        this.page = 1
        this.getListTrends()
      } else if (this.current === 1) {
        this.dataNiceGoodsList = []
        this.pageNiceGoods = 1
        this.listNiceGoodsList()

      } else if (this.current === 2) {
        this.listNiceGoodsCat = []
        this.pageNiceGoodsCates = 1
        this.currentCates = 0
        this.getGoodsList(0)

      } else if (this.current === 3) {
        $.go('/pagesB/goods/niceGoodsList');
      }


    },
    changeCates(index) {
      this.currentCates = index;
      let cateId = this.listTabsCates[index].catePid
      this.listNiceGoodsCat = []
      this.pageNiceGoodsCates = 1
      this.getGoodsList(cateId)
      this.$refs.stylegoods.refresh();
    },
    listHomeFloorConfig() {
      const self = this;
      $.ajax({
        url: APIHome.listHomeFloorConfig,
        data: {},
        loading: true,
        method: 'GET',
        success(res) {
          let dataArray = res.data
          self.swiperList = []
          dataArray.forEach((item, index) => {
            if (item.type === 1) {
              let param = {
                sid: index,
                src: item.jumpUrl,
                img: item.swiperUrl
              }
              self.swiperList.push(param)
            } else if (item.type === 2) {
              self.advertisingBanners = item.advertisingUrl
              self.bannerToUrl = item.jumpUrl
            } else if (item.type === 3) {
              self.rollingNotifyList = item.rollingNotify.split(",")
            }
          })

        }
      })
    },
    toScan() {
      let isLogin = uni.getStorageSync('token') ? true : false;
      /*#ifdef H5*/
      $.$toast("当前为H5页面暂不支持扫一扫，请移步小程序");
      /*#endif*/

      /*#ifdef MP*/
      let self = this
      uni.scanCode({
        success: function (res) {
          // $.$toast('条码类型：' + res.scanType + "," + '条码内容：' + res.result);
          //扫码成功后如果内容中的扫码类型是认证，就打开认证窗口
          var n = res.result.replace(/\ufeff/g, "")
          let jsonResult = JSON.parse(n)
          if (jsonResult.scanType === "authentication") {
            if (isLogin) {
              self.initToUserAuth(jsonResult.authFromInvitCode, jsonResult.shopName);
            } else {
              $.$toast("请登录后进行认证");
            }

          }

        }
      });
      /*#endif*/

    },
    showHeadImg() {
      let logo = uni.getStorageSync('config').logo
      let userHeadImg = uni.getStorageSync('userInfo').headImg

      if (userHeadImg) {
        this.headImg = userHeadImg + "?imageView2/2/w/300"
      } else {
        this.headImg = logo
      }
    },
    showContent(data) {
      $.$toast(data.content, "", 2000)
    },
    getListTrends() {
      const self = this;
      $.ajax({
        url: API.searchPlatformHome,
        data: {
          type: '',
          isRefreshGetNumber: true,
          page: self.page,
          pageSize: self.pageSize
        },
        loading: true,
        method: 'GET',
        success(res) {
          uni.stopPullDownRefresh();
          let list = res.data.list ? res.data.list : [];
          if (list.length <= 0 && self.page == 1) {
            return;
          }
          list.forEach((ele, index) => {
            let obj = ele.walkTrends;
            obj.showDownload = true;
            obj.downloadingButtonLabel = '';
            obj.collectTrends = ele.collectTrends;
            obj.collectWalkMember = ele.collectWalkMember;
            obj.index = index;
            if (obj.videoUrl && obj.videoUrl != '') {
              obj['mainImg'] = obj.videoUrl + "?" +uni.getStorageSync('imageProcessingSuffix');
            } else if (String(obj.images).indexOf('|') >= 0) {
              obj['mainImg'] = obj.images.split('|')[0];
            } else {
              obj['mainImg'] = obj.images;
            }
            self.listTrends.push(obj);
          })
          self.totalPage = res.data.totalPage;
          self.pageNum = res.data.pageNum;

          // #ifdef MP-WEIXIN
          if (self.isRefresh) {
            self.isRefresh = false;
            self.refreshClass = ['fadeIn'];
          }
          // #endif

        }
      })
    },

    indexGgRefresh() {
      this.isLogin = uni.getStorageSync('token') ? true : false;
      this.isAuth = uni.getStorageSync('userInfo').shopStatus == 1 ? true : false;
      const self = this;
      self.$nextTick(() => {
        if (self.$refs.tabbar) {
          self.$refs.tabbar.getChatLen();
        }
      })
    },
    //搜索跳转
    toSearch() {
      uni.showToast({title: "建议跳转到新页面做搜索功能"});
    },
    //轮播图跳转
    toSwiper(e) {
      if (typeof e.src === "undefined") {
        e.src = ""
      }
      $.go(e.src)
    },
    goToOtherPageFromBanner() {
      if (typeof this.bannerToUrl === "undefined") {
        this.bannerToUrl = ""
      }
      $.go(this.bannerToUrl)
    },

    //分类跳转
    toCategory(e) {
      if (e.cat_id === 2) {
        if (!this.isLogin) {
          $.go('/pagesB/passport/login');
        } else {
          if (!this.isAuth) {
            $.$toast("请先认证关联商家");
            this.initToUserAuth("", "");
          } else {
            $.go('/pages/index/index');
          }
        }
      } else if (e.cat_id === 3) {
        if (!this.isLogin) {
          $.go('/pagesB/passport/login');
        } else {
          $.go('/pagesB/myTrends/myTrends');
        }
      } else if (e.cat_id === 0) {
        $.go('/pages/find/indexGg');
      } else if (e.cat_id === 1) {
        $.go('/pagesB/goods/niceGoodsList');

      }
    },
    initToUserAuth(authFromInvitCode, shopName) {
      this.$refs.toUserAuth.init(null, null, null, null, null, authFromInvitCode, shopName)
    },
    //推荐商品跳转
    toPick(e) {
      uni.showToast({title: '推荐商品' + e.goods_id});
    },
    //商品跳转
    toGoods(e) {
      if (e.type === 1) {
        $.go('/pagesA/find/video?id=' + e.id + '&isSelf=' + false + '&userId=' + "" + '&isGg=' + true + '&onlyOneTrendsId=' + e.id + '&location=' + 2);

      } else if (e.type === 3) {
        let url = e.images
        if (this.isShowWatermark) {
          url = url + "-" + this.watermarkContent
        }
        uni.previewImage({
          urls: [url], // 需要预览的图片链接列表
        });
      }
    },
    //更新分类指示器
    categoryChange(event) {
      this.currentPageindex = event.detail.current;
    },
    //分类图片加载完毕
    categoryImgLoad(e) {
      this.categoryImg = this.categoryImg ? this.categoryImg + 1 : 1;
      //完成加载11个分类图片开始计算分类高度，若分类图片不足10个则修改此处的10。
      if (this.categoryImg == 10) {
        this.getCategoryHeight();
      }
    },
    //更新分类高度
    getCategoryHeight() {
      let view = uni.createSelectorQuery().select('.category-list');
      view.fields(
          {
            size: true
          },
          data => {
            this.categoryHeight = data.height + 'px';
          }
      ).exec();
    },
    bigHeadImg() {
      uni.previewImage({
        urls: [this.headImg], // 需要预览的图片链接列表
      });
    },
  }
};
</script>
<style lang="scss">
@font-face {
  font-family: "HMfont-home";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP8AAsAAAAACFwAAAOwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEEINSATYCJAMQCwoABCAFhG0HTxtLBxHVmzvJfhS4scOeC1v4zNNRK/hO5b0IHqg/8838ye5XsIDanmAkhZ1NSZygm4SsbYYkp17ICsOUxIP/ZZm9xejtQAD8zzX10geY387mEtXapUd7A5xF6oAi2pJoE8YNY1dexGkIwCSZQoiq1es2RUdhTBKA6N2jWwf0lAlVky3QEYSUrFSIOTjQ5VR5GZjt/168obDQQeLQMGY27FqtMxWf5z5fpgWCgdYugng8B8DWgQYUAhSI7qWujmhhqBAaptJfURzQ0ZEwVkfB58uCQSTZi0o3//JAItBAhGBk2gAURUrtxMQ2BQnPC1IQ8HyZmpvE1XgdMIDtwHVEJt4qkThsZwFPVHiEFTHKtWBBYGGUe/HmsZu6TluCStw+fXGMY9GyUb4b133Xrze9etV77VqzxcuXbYq8bF6/7rtxo5lY6A1cLcuCQJS3oXHswOYKUSaI71xkXr3ayZy2SIix0YumRS6AwEnLmr58WS9z2pKlYcJCCGzcXOU81Xuhp1osIWbBiUQWehda7lTvaNeCJX0WbYgksMA0hdlLo6zDp1PEomIdVu7YE4wN7nH7uGPdHXz2R3uHnX68tcP6SPE5ZSdObNpN/9dybtfmr6tHoy6+rN+DqdvnW9lUbkHTdcUWfKp1yzVr5Ag5HCqGU0Hca3jpAt2GiWFRwxYvdpYFo2b3tN/HvLeFd+BAr5Bu7CXnzKFlJb8dtP3ucx1djc+589Pep+W7X706stfvml+7i8fsWunxp7/f/uzsrgzj9Sv3p+6T7yqwvrfdy3nk/J6eZ84fnHp2lSvf/m/7H7569dDvuY/fTX+Mwdog+QVAGyB/IHmGyK8/exQrX13Maucu+y23rrbi5tQ1T3yTor3oj4kV8a8VtyxSqtQwKyXLbJF2kaI5DgAkYGICPzQG4dwfQxPVOhMEOlExSEJJAg2dTFSRhcCBRVEIQacCmBSkxnqLCAaiIZQBFGAiAIGH3SBxcRo0PFxBFXkPHETzDkLwCA1MfCJiR4tswStWxeEccIPlAbXSxS1rYEH2G0U8ZpeU+sw/Oq+80JR1NjrghW6MOT6JNgQO3NEJPTgPj4PAONK4hlKGYLqq4mVvKlc6M0YVh3PADZYH1EoXd8sHlvv+G0U8ZldDq/D+0XnVPTRl3QIdVFcr2rX090m0IXA8jjs6oYcOPMwQgSkfpnENpewRMF2FSvG2qnJ+zfmE6wATY6YSUmhCCQehg9V8advwun0+nHuJ0VP0kYrcz/Qox5hl') format('woff2');
}

.icon {
  font-family: "HMfont-home" !important;
  font-size: 60upx;
  font-style: normal;
  color: #ffffff;

  &.scan {
    &:before {
      content: "\e69a";
    }
  }

  &.menu {
    &:before {
      content: "\e62b";
    }
  }

  &.search {
    &:before {
      content: "\e628";
    }
  }
}

page {
  height: 80%;
  background-color: #ebebeb;
}

.status {
  width: 100%;
  height: 0;
  /*  #ifdef  APP-PLUS  */
  height: var(--status-bar-height);
  /*  #endif  */
  background-color: #ff570a;
  position: fixed;
  top: 0;
  z-index: 999;
}

.header {
  width: 100%;
  height: 16px;
  background-color: #ff570a;
  display: flex;
  position: fixed;
  top: 0;
  /*  #ifdef  APP-PLUS  */
  top: var(--status-bar-height);
  /*  #endif  */

  z-index: 996;

  .scan {
    margin-top: 17px;
    width: 100upx;
    height: 100upx;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .input {
    margin-top: 40px;
    width: calc(100% - 200upx);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    input {
      width: calc(100% - 60upx);
      height: 60upx;
      background-color: #ffffff;
      border-radius: 60upx;
      padding-left: 60upx;
      font-size: 30upx;

    }

    .icon {
      width: 60upx;
      height: 60upx;
      position: absolute;
      color: #a18090;
      z-index: 996;
      top: -5px;
      left: 12px;
      font-size: 40upx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .menu {
    width: 100upx;
    height: 95px;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 60upx;
      height: 60upx;
      border-radius: 60upx;
    }
  }
}

.place {
  /*  #ifdef  APP-PLUS  */
  margin-top: var(--status-bar-height);
  /*  #endif  */
  background-color: #ff570a;
  height: 100px;
}

.swiper-view {
  .swiper {
    margin-top: 49px;
    width: 100%;
    height: 280upx;

    image {
      border-bottom-left-radius: 5px; /*左下角圆角*/
      border-bottom-right-radius: 5px; /*右下角圆角*/
      width: 100%;
      height: 225px;
    }
  }

  .keep-out {
    width: 97%;
    height: 30upx;
    border-radius: 100% 100% 0 0;
    //background-color: #ff570a;
    margin-top: -15upx;
    position: absolute;
  }
}

.category {
  height: 143px;
  width: 100%;
  padding: 2.5vw 2.5vw;
  //background-color: #ff570a;

  .box {
    width: 100%;
    border-radius: 20upx;
    height: 125px;
    background-color: #ffffff;

    .dots {
      display: flex;
      justify-content: center;
      height: 15upx;
      width: 100%;

      view {
        width: 30upx;
        height: 5upx;
        background-color: rgba(0, 0, 0, 0.2);

        &.active {
          background-color: #ff570a;
        }
      }
    }

    .swiper {
      width: 100%;
      padding: 10upx 0;

      .uni-swiper-dot {
        width: 20upx;
      }

      .category-list {
        margin-left: -27px;
        margin-top: -5px;
        width: 114%;
        height: auto;
        display: flex;
        justify-content: center;
        padding: 11px 0;
        align-items: center;
        flex-flow: wrap;

        .icon {
          width: 23%;
          display: flex;
          flex-flow: wrap;
          justify-content: center;
          font-size: 22upx;
          color: #666;

          image {
            width: 70%;
            height: 13.3vw;
          }

          view {
            width: 100%;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}

.pick {
  width: 100%;
  padding: 0 2.5vw 2.5vw 2.5vw;
  background: linear-gradient(to bottom, #ff570a 0%, #ffffff 105%);

  .box {
    width: 100%;
    border-radius: 20upx;
    background-color: #ffffff;

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      height: 60upx;
      border-bottom: solid 1upx #eee;
      padding-bottom: 10upx;

      .big {
        font-size: 34upx;
        padding-left: 20upx;
        color: #46434f;
      }

      .small {
        font-size: 24upx;
        padding-left: 20upx;
        color: #827f8b;
      }
    }

    .product-list {
      padding: 15upx 20upx 15upx 20upx;
      column-count: 2;
      column-width: 50%;
      column-gap: 10upx;

      > view {
        display: flex;
        background-color: #f8f8f8;
        position: relative;

        &:nth-child(1) {
          .price {
            color: #e65339;
            font-size: 30upx;
            position: absolute;
            bottom: 8upx;
            left: 8upx;
          }

          .slogan {
            color: #807c87;
            font-size: 30upx;
            position: absolute;
            bottom: 8upx;
            right: 8upx;
          }

          image {
            width: 100%;
            height: 0;
          }
        }

        &:nth-child(2), &:nth-child(3) {
          image {
            width: calc(50% - 5upx);
            height: 0;
          }

          .price {
            position: absolute;
            top: 25%;
            left: 55%;
            color: #e65339;
            font-size: 30upx;
          }

          .slogan {
            position: absolute;
            top: 60%;
            left: 55%;
            color: #807c87;
            font-size: 20upx;
          }
        }

        &:nth-child(2) {
          margin-bottom: 10upx;
        }
      }
    }
  }
}

.banner {
  image {
    width: 100%;
    height: 10px;
  }
}

.goods-list {
  //background-color: #f4f4f4;

  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60upx;
    color: #979797;
    font-size: 24upx;
  }

  .loading-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60upx;
    color: #979797;
    font-size: 24upx;
  }

  .product-list {
    margin-left: 10px;
    width: 95%;
    padding: 0 2.5% 2.5vw 2.5%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .product {
      width: 48.75%;
      border-radius: 20upx;
      background-color: #fff;
      margin: 0 0 15upx 0;

      image {
        width: 100%;
        border-radius: 20upx 20upx 0 0;
      }

      .name {
        width: 92%;
        padding: 10upx 4%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-align: justify;
        overflow: hidden;
        font-size: 30upx;
      }

      .info {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 92%;
        padding: 10upx 4% 10upx 4%;

        .price {
          color: #e65339;
          font-size: 30upx;
          font-weight: 600;
        }

        .slogan {
          color: #807c87;
          font-size: 24upx;
        }
      }
    }

  }
}

/* 播放箭头样式 */
.play-arrow {
  width: 20px; /* 调整箭头大小 */
  height: 20px;
  position: absolute; /* 将箭头绝对定位到右上角 */
  top: 0px; /* 调整箭头与图片之间的距离 */
  left: 5px;
}

.play-role {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.u-tabs {
  border-top-left-radius: 5px; /*左上角为圆角*/
  border-top-right-radius: 5px; /*右上角为圆角*/
}

.container {
  background: #ebebeb;
}
</style>
